<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{arr1[0]}}</p>
        <p>{{arr1[1]}}</p>
        <p>{{arr1[2]}}</p>
        <p>{{arr1[3]}}</p>
        <hr>
        <p v-for="m in arr1">{{m}}</p>
        <hr>
        <div v-for="s in arr2" >
            <input type="text" :value="s.name"> | 
            <input type="text" v-model="s.name"> |
            <span>{{s.name}}</span> |
            <span>{{s.sex}}</span>
        </div>
    </div>

    <script src="./vue.global.prod.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data:  function () {
                return {
                    message: 'Hello Vue!',

                    //元素
                    arr1: [
                        'tom', 'jerry', 'jack', 'alice'
                    ],
                    arr2: [
                        {name:'tom', sex:'男'},
                        {name:'jerry', sex:'男'},
                        {name:'jack', sex:'男'},
                        {name:'alice', sex:'女'},
                    ]
                };
            }
        }).mount('#app');
    </script>
</body>
</html>